<template>
  <div class="loading-nodata-container">
    <!-- 加载中状态 -->
    <div v-if="loading" class="loading-container">
      <div class="loading-spinner"></div>
      <p>{{ loadingText }}</p>
    </div>
    
    <!-- 暂无数据状态 -->
    <div v-else-if="isEmpty" class="no-data-container">
      <div class="no-data-icon">
        <el-icon size="32"><Document /></el-icon>
      </div>
      <p>{{ emptyText }}</p>
    </div>
    
    <!-- 显示数据内容 -->
    <div v-else>
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { Document } from '@element-plus/icons-vue';

const props = defineProps({
  // 是否处于加载状态
  loading: {
    type: Boolean,
    default: false
  },
  // 数据源
  data: {
    type: [Array, Object],
    default: () => []
  },
  // 加载中文本
  loadingText: {
    type: String,
    default: '数据加载中...'
  },
  // 空数据文本
  emptyText: {
    type: String,
    default: '暂无数据'
  },
  // 自定义判断数据是否为空的方法
  isEmptyFunc: {
    type: Function,
    default: null
  }
});

// 判断数据是否为空
const isEmpty = computed(() => {
  // 如果提供了自定义的空数据判断方法，则使用它
  if (props.isEmptyFunc) {
    return props.isEmptyFunc(props.data);
  }
  
  // 默认判断逻辑
  if (Array.isArray(props.data)) {
    return props.data.length === 0;
  } else if (props.data && typeof props.data === 'object') {
    return Object.keys(props.data).length === 0;
  }
  
  return !props.data;
});
</script>

<style scoped lang="scss">
.loading-nodata-container {
  width: 100%;
  // height: 100%;
}

.loading-container, .no-data-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  color: var(--otherFontColor, #909399);
  text-align: center;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid var(--el-color-primary, #409EFF);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

.no-data-icon {
  margin-bottom: 10px;
  opacity: 0.5;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style> 